<template>
	<view class="home-container">
    <!-- 轮播图区域 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <swiper-item  v-for="(item,i) in swiperList" :key='i' class='swiperitem'>
        <navigator :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id ">
          <image :src="item.image_src" mode="widthFix"></image>
        </navigator>
      </swiper-item>
    </swiper>
    
    <!-- 分类区域 -->
    <view class="cate">
      <view class="cate-item" v-for="(item,i) in navList" :key='i' @click="navClickHandler(item)">
        <image :src="item.image_src" mode="widthFix"></image>
      </view>
    </view>
    
<!-- 楼层区域    -->
      <view class="floor">
        
      <view class="floor-item" v-for="(item,i) in floorList" :key='i'>
           <!-- 标题区域 -->
                  <image :src="item.floor_title.image_src" mode="widthFix"></image>
           <!-- 图片区域 -->
                  <view class="floor-img-box">
                    
                    <!-- 大图片区域 -->
                        <view class="left-img">
                          <navigator :url=item.product_list[0].url>
                           <image :src="item.product_list[0].image_src" :style="{width:item.product_list[0].image_width + 'rpx'}" mode="widthFix"></image>
                          </navigator>
                        </view>
                    
                    <!-- 小图片区域 -->
                      <view class="right-img">
                          <view v-for="(item2,i2) in item.product_list" :key='i2'>
                            <navigator :url="item2.url">
                               <image :src="item2.image_src" :style="{width:item2.image_width + 'rpx'}" mode="widthFix" v-if="i2 !== 0"></image>
                            </navigator>

                            
                          </view>
                      </view>
                  </view>
         </view>
      </view>
	
  
  </view>
</template>

<script>
  import badgeMix from '@/mixins/tabBar-badge.js'
	export default {
    mixins:[badgeMix],
		data() {
			return {
				swiperList:[],
        navList:[],
        floorList:[]
			};
		},
    onLoad() {
      this.getSwiperList()
      this.getNavList()
      this.getFloorList()
    },
    methods:{
      async getSwiperList(){
        const {data : res} = await uni.$http.get('/home/swiperdata')
        if(res.meta.status !== 200) return uni.$showMsg()
        // console.log(res)
        this.swiperList = res.message
      },
      
      // 获取分类数据
      async getNavList(){
        const { data : res } = await uni.$http.get('/home/catitems')
        // console.log(res)
        if(res.meta.status !== 200) return uni.$showMsg()
        this.navList = res.message
      },
      
      // 分类点击事件
      navClickHandler(item){
        if(item.name === '分类'){
          console.log('')
          uni.switchTab({
            url:"/pages/cate/cate"
          })
        }
      },
      
      // 获取楼层的数据
      async getFloorList(){
        const {data:res} = await uni.$http.get('/home/floordata')
        if(res.meta.status !== 200) return uni.$showMsg()
        
        // 需要处理楼层数据
        res.message.forEach(item =>{
          item.product_list.forEach(prod => {
            prod.url = '/subpkg/goods_list/goods_list?' + prod.navigator_url.split('?')[1]
            // prod.url = '/subpkg/goods_list/goods_list?' + prod.navigator_url.split('?')[1]
          })
        })
        this.floorList = res.message
      }
      
      
    }
	}
</script>

<style lang="scss">
.home-container{
  .swiperitem{
    height: 240px;
    image{
      width: 100%;
      height: 100%;
    }
  }
  
  .cate{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10rpx 0;
    .cate-item{
      width: 25%;
    }
    image{
      width: 100%;
    }
  }
  
  
  .floor{
    .floor-item{
      .floor-img-box{
        display: flex;
        .right-img{
          display: flex;
          flex-wrap: wrap;
          image{
            margin: 0 10rpx;
          }
      }
      
      }
    }
  }
}
</style>
